<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>记事本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        header {
            width: 100%;
            height: 30%;
            margin: 60px auto;
        }
        
        header h2 {
            text-align: center;
            color: #333;
        }
        
        main {
            width: 80%;
            margin: 10px 10%;
        }
        
        main div {
            width: 100%;
        }
        
        main .psot input,
        main .psot :last-child,
        main .get ul,
        main .get div {
            display: block;
            width: 60%;
            margin: 20px auto;
            border: 1px solid rgb(66, 63, 216);
            border-radius: 8px;
            letter-spacing: 2px;
            padding: 8px;
            line-height: 22px;
            outline: none;
        }
        
        main .psot input:hover {
            border: 1px solid rgb(66, 63, 216);
        }
        
        main .psot input:focus {
            border-radius: 8px;
            border: 1px solid rgb(66, 63, 216);
        }
        
        main .psot :last-child {
            border: none;
            background: rgb(33, 77, 224);
            border-radius: 5px;
            color: white;
            font-size: 17px;
            box-sizing: content-box;
        }
        
        main .get ul {
            list-style: none;
            border: none;
            border-radius: 3px;
            box-shadow: 0 2px 5px .5px rgb(177, 170, 170);
        }
        
        main .get ul li {
            margin: 10px auto;
            padding: 10px;
            color: rgb(116, 108, 108);
            border-bottom: 1px solid rgb(211, 204, 204);
            transition: all .5s;
        }
        
        main .get ul li:hover {
            color: rgb(39, 37, 37);
        }
        
        main .get ul :last-child {
            border-bottom: none;
        }
        
        button {
            border: none;
            box-sizing: content-box;
            outline: none;
            background: white;
        }
        
        main .get ul li button {
            float: right;
            font-size: 16px;
            opacity: 0;
        }
        
        main .get ul li:hover button {
            opacity: 1;
        }
        
        main .get div {
            border: none;
        }
        
        main .get div :last-child {
            float: right;
        }
        
        main .get div :first-child {
            float: left;
        }
        
        main .get p {
            display: inline;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        footer {
            width: 80%;
            margin: 100px 10%;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h2>在线记事本</h2>
    </header>
    <main id="app">
        <div class="psot">
            <input type="text" placeholder="记录事件" required="required" v-model="things">
            <input type="number" placeholder="例：3 分钟后提醒" required="required" min="1" v-model="times">
            <button @click="getdata">提交</button>
        </div>
        <div class="get">
            <ul>
                <li v-for="(value,index) in txtdata" :key="index"><span>{{index+1}} </span>{{value[0]}}<button @click="delbtn(index)">#</button></li>
            </ul>
            <div>
                <p><span>{{txtdata.length}}</span>item list</p>
                <p><button @click="alldel">clear</button></p>
            </div>

        </div>

    </main>
    <footer>
        <p>版权所有 Copyright© <a href="http://inkgn.gitee.com">yinks</a></p>
    </footer>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                things: '',
                times: null,
                txtdata: [],
                timer: null

            }
        },
        // 写入创建时间戳
        methods: {
            getdata: function() {
                if (this.things && this.times) {
                    var data = [];
                    var oldtime = new Date().getTime() + (Number(this.times) * 1000 * 60);
                    data.push(this.things);
                    data.push(oldtime)
                    this.txtdata.push(data)
                } else {
                    alert('请填写完整信息！')
                }
            },
            // 定时删除，创建时间戳-当前时间戳 == 0 删除事件
            newtime: function() {
                for (var i = 0; i < this.txtdata.length; i++) {
                    var newtime = new Date().getTime();
                    var oldtime = this.txtdata[i][1];
                    var remaining = oldtime - newtime;
                    if (remaining <= 0) {
                        alert('事件提醒：[' + this.txtdata[i][0] + '] 已到规定时间，点击确定为您删除事件');
                        this.txtdata.splice(i, 1);
                    } else {
                        console.log('ok')
                    }
                }
            },
            // list 删除
            delbtn: function(i) {
                this.txtdata.splice(i, 1);
            },
            // 清空数据
            alldel: function() {
                this.txtdata.splice(0, this.txtdata.length);
                console.log(1234)
            }
        },
        // 为TXTdata设置监听
        watch: {
            txtdata: function() {
                // 判断当前list中是否有数据，没有有数据清除定时器
                if (!this.txtdata) {
                    clearInterval(this.timer);
                    return;
                } else if (!this.timer) {
                    // 给list添加定时器
                    this.timer = setInterval(this.newtime, 10000);
                    console.log('添加成功');

                } else {
                    console.log('timer已存在添加不成功');
                }



            }
        }
    })
</script>

</html